const cvs = document.getElementById('bg')
const width = window.innerWidth
const height = window.innerHeight
cvs.width = width
cvs.height = height
const ctx = cvs.getContext('2d')
const clounmwidth = 20
const clounmCount = Math.floor(width / clounmwidth)
var arr = new Array(clounmCount)
arr.fill(1)


function draw() {
    ctx.fillStyle = 'rgba(240,240,240,0.1)'
    ctx.fillRect(0, 0, width, height)
    ctx.fillStyle = getRandomColor()
    const fz = 20
    ctx.font = ` ${fz}px "Roboto Mono"`
    for (let i = 0; i < clounmCount; i++) {
        var x = i * clounmwidth
        var y = arr[i] * fz
        ctx.fillText(getRandomChar(), x, y)
        if (y > height&&Math.random()>0.99) {
            arr[i] = 0
        } else {
            arr[i]++
        }

    }
}

function getRandomColor() {
    const color = [
        "#800000",
        "#FB0000",
        "#A52A2A",
        "#ADFF2F",
        "#006400",
        "#008000",
        "#FFC0CB",
        "#FAEBD7",
        "#F5F5DC",
        "#0FE4C4",
        "#A3DEB3",
        "#FFE8DC",
        "#F0F8FF",
    ]

    return color[Math.floor(Math.random() * color.length)]
}

function getRandomChar() {
    var str = "console.log('helloworld');"
    return str[Math.floor(Math.random() * str.length)]
}

setInterval(draw, 40)
